<template>
  <div class="wrapper clearfix" v-wechat-title="title">
    <van-form @submit="onSubmit">
      <div class="title">店铺详情</div>
      <company-dianpuInfo :dataL="dataL"></company-dianpuInfo>
      <div class="title">物业详情</div>
      <company-propertyInfo :dataL="dataL"></company-propertyInfo>
      <div class="title">完善信息</div>
      <div>
        <ul class="dianpu_info">
          <li>
            <span class="hong">*</span><span class="jiacu">店铺图片</span>
            <div class="clearfix margin_top">
              <div class="file_img " v-for="(item, index) in storeImages" :key="index">
                <img :src="baseUrl + item">
                <div class="cha iconfont icon-x" @click="cha(index)"></div>
              </div>
              <div class="file_img van-icon van-icon-photograph van-uploader__upload-icon">
                <input type="file" class="" multiple @change="file($event)">
              </div>
            </div>
            <p>最少上传1张，最多上传8张，图片格式为png、jpg</p>
          </li>
          <li>
            <span class="jiacu">证件照</span><span>（非必填）</span>
            <div class="clearfix margin_top">
              <div class="file_img file_imgimg van-icon van-icon-photograph van-uploader__upload-icon">
                <img v-if="certificateimg1!==''" :src="baseUrl + certificateimg1">
                <input type="file" class="" @change="fileX($event,1)">
              </div>
              <div class="file_img file_imgimg van-icon van-icon-photograph van-uploader__upload-icon">
                <img v-if="certificateimg2!==''" :src="baseUrl + certificateimg2">
                <input type="file" class="" @change="fileX($event,2)">
              </div>
              <div class="file_img file_imgimg van-icon van-icon-photograph van-uploader__upload-icon">
                <img v-if="certificateimg3!==''" :src="baseUrl + certificateimg3">
                <input type="file" class="" @change="fileX($event,3)">
              </div>
              <div class="file_span">营业执照</div>
              <div class="file_span file_span2">卫生许可证</div>
              <div class="file_span">经营许可证</div>
            </div>
          </li>
          <li>
            <span class="jiacu">店铺详情</span><span>（非必填）</span>
            <van-field
              v-model="storeContent"
              name="store_content"
              placeholder="请输入店铺详情"
            />
          </li>
        </ul>
      </div>
      <van-button round block type="info" native-type="submit" class="action">
        发布
      </van-button>
    </van-form>
  </div>
</template>

<script>
import CompanyDianpuInfo from './components/CompanyDianpuInfo'
import CompanyPropertyInfo from './components/CompanyPropertyInfo'
export default {
  name: 'transfer',
  components: {
    CompanyDianpuInfo,
    CompanyPropertyInfo
  },
  data () {
    return {
      title: '快速转铺',
      dataL: {},
      storeContent: '',
      storeImages: [],
      certificateimg1: '',
      certificateimg2: '',
      certificateimg3: '',
      certificateimg4: []
    }
  },
  mounted () {
    let that = this
    if (that.$route.params.id !== 0) {
      that.$axios.post(process.env.API_HOST + '/api/release/store_detail', {
        id: that.$route.params.id
      }).then(function (res) {
        if (res.data.code === 1) {
          that.dataL = res.data.data
          that.storeContent = res.data.data.store_content
          if (res.data.data.store_images !== '') {
            that.storeImages = res.data.data.store_images.split(',')
          }
          if (res.data.data.certificateimg !== '') {
            that.certificateimg1 = res.data.data.certificateimg.split(',')[0]
            that.certificateimg2 = res.data.data.certificateimg.split(',')[1]
            that.certificateimg3 = res.data.data.certificateimg.split(',')[2]
            that.certificateimg4 = res.data.data.certificateimg.split(',')
          }
        }
      })
        .catch(error => console.log(error))
    }
  },
  methods: {
    file (event) {
      for (var i = 0; i < event.target.files.length; i++) {
        const formData = new FormData()
        formData.append('file', event.target.files[i])
        this.$axios.post(process.env.API_HOST + '/api/common/upload', formData
        ).then(this.fileSee)
          .catch(error => console.log(error))
      }
    },
    fileX (event, type) {
      let that = this
      const formData = new FormData()
      formData.append('file', event.target.files[0])
      that.$axios.post(process.env.API_HOST + '/api/common/upload', formData
      ).then(function (res) {
        if (res.data.code === 1) {
          if (type === 1) {
            that.certificateimg1 = res.data.data.url
          } else if (type === 2) {
            that.certificateimg2 = res.data.data.url
          } else if (type === 3) {
            that.certificateimg3 = res.data.data.url
          }
          that.certificateimg4 = [that.certificateimg1, that.certificateimg2, that.certificateimg3]
        }
      })
        .catch(error => console.log(error))
    },
    cha (index) {
      this.storeImages.splice(index, 1)
    },
    fileSee (res) {
      if (res.data.code === 1) {
        this.storeImages.push(res.data.data.url)
      }
    },
    onSubmit (values) {
      if (this.storeImages.length < 1) {
        this.$toast('请上传店铺照片')
      } else {
        if (this.$route.params.id !== 0) {
          values['id'] = this.$route.params.id
        }
        values['store_province'] = sessionStorage.getItem('Dcity')
        values['store_images'] = this.storeImages.toString()
        values['certificateimg'] = this.certificateimg4
        values['facility'] = ''
        delete values['undefined']
        this.$axios.post(process.env.API_HOST + '/api/release/transfer', values
        ).then(this.onSubmitSee)
          .catch(error => console.log(error))
      }
    },
    onSubmitSee (res) {
      let that = this
      if (res.data.code === 1) {
        this.$toast('发布成功')
        setTimeout(function () {
          that.$router.push('/Mrelease/0')
        }, 1500)
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  width 100%
  padding .4rem /* 20/50 */
  padding-top .1rem /* 5/50 */
  .title
    width 100%
    height 1.2rem /* 60/50 */
    line-height 1.2rem /* 60/50 */
    font-size .4rem /* 20/50 */
    font-weight bold
  .van-button
    background-color #F8F8F8
    color #999999
    font-size .4rem /* 20/50 */
    border-radius .1rem /* 5/50 */
    border 0px
    margin-top .8rem /* 40/50 */
  .action
    color #fff
    background linear-gradient(90deg, #F14510, #EE340F)
    box-shadow 1px 1px 5px 0px rgba(255, 1, 1, 0.42)
.dianpu_info
  width 100%
  height auto
  box-shadow 0px 0px 5px 0px rgba(4, 0, 0, 0.1)
  border-radius .1rem /* 5/50 */
  padding 0 .3rem /* 15/50 */
  padding-bottom .5rem /* 25/50 */
  li
    width:100%
    font-size .26rem /* 13/50 */
    padding-top .5rem /* 25/50 */
    p
      color #666666
      font-size .24rem /* 12/50 */
    p.zhengjian_p
      text-align center
      line-height .66rem /* 33/50 */
      font-size .26rem /* 13/50 */
    .hong
      font-size .22rem /* 11/50 */
      color #F6360A
    .file_img
      width:31%
      height 1.6rem /* 80/50 */
      float left
      font-size .7rem /* 35/50 */
      text-align center
      line-height 1.6rem /* 80/50 */
      position relative
      margin-bottom .2rem /* 10/50 */
      img
        width 100%
        height 100%
        object-fit cover
      .cha
        font-size .3rem
        position absolute
        right 0
        top 0
        width .3rem /* 15/50 */
        height .3rem /* 15/50 */
        line-height .3rem
    .file_span
      width 31%
      float left
      text-align center
    .file_span2
      margin-left 3.5%
      margin-right 3.5%
    .van-icon
      background-color #F4F4F4
      input
        width 100%
        height 100%
        z-index 1
        opacity 0
        position absolute
        cursor pointer
        left 0px
        border-radius .1rem /* 5/50 */
    .file_img:nth-child(2)
      margin-left 3.5%
      margin-right 3.5%
    .van-uploader__upload-icon::before
      content: '\F0A2'
    .file_imgimg
      img
        position absolute
        top 0px
        left 0px
    .van-field
      width 100%
      height 2rem /* 100/50 */
      border 1px solid rgba(0,0,0,.1)
      border-radius .1rem /* 5/50 */
      margin-top .3rem /* 15/50 */
  .margin_top
    margin-top .3rem /* 15/50 */
</style>
